<!DOCTYPE html>
<html>
<head>
#include("../../_common/head.html")
<title>在线列表</title>
</head>
<body class="pear-container">
    <div class="layui-panel query-panel /*查询面板*/">
        <form class="layui-form layui-row layui-col-space16" lay-filter="query-form" onsubmit="return false;">
        	<input type="hidden" name="sortField" value="startDatetime" placeholder="表格初始排序字段" >
        	<input type="hidden" name="sortType"  value="desc"  placeholder="表格初始排序方向" >
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input id="startTime" type="text" name="startDate" value="#(startDate??)" placeholder="开始日期" autocomplete="off" class="layui-input select-time" data-type="datetime" value="#(startDate??)">
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input id="endTime" type="text" name="endDate" value="#(endDate??)" placeholder="结束日期" autocomplete="off" class="layui-input select-time"  data-type="datetime" value="#(endDate??)">
                </div>
            </div>
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="pear-icon pear-icon-text"></i>
					</div>
					<input type="text" name="word" value="#(word??)" placeholder="模糊查询" autocomplete="off" class="layui-input" lay-affix="clear">
				</div>
		    </div>
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
                    <select name="status">
                        <option value="">-- 在线状态 --</option>
                        #DICTS(type="user_online_status")#for(item : dicts)
                        <option value="#(item.value)"#if(status?? == item.value) selected#end>#(item.label)</option>
                        #end#end
                    </select>
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <button type="button" class="pear-btn pear-btn-sm pear-btn-primary" onclick="queryFn.panel.search(window.refresh);">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
                <button type="button" class="pear-btn pear-btn-sm" onclick="queryFn.panel.reset(window.refresh);">
                    <i class="layui-icon layui-icon-refresh"></i> 重置
                </button>
            </div>
        </form>
    </div>
    <div class="layui-panel data-panel /*数据面板*/">
        <table id="data-table" lay-filter="data-table"></table>
    </div>

    <!-- 数据表单头部工具栏操作按钮 -->
    <script type="text/html" id="table-toolbar">
    <div class="pear-btn-group">
    <!-- #authPermissions('monitor:online:batchForceLogout') -->
        <a class="pear-btn pear-btn-danger pear-btn-xs" round lay-event="batchForceLogout"><i class="layui-icon layui-icon-close"></i>&nbsp;强退</a>
    <!-- #end -->
    </div>
    </script>

    <!-- 单记录操作按钮 -->
    <script type="text/html" id="operate-bar">
    <div class="pear-btn-group">
	#[[{{# if(d.status == 'ON'){ }}]]#
    <!-- #authPermissions('monitor:online:forceLogout') -->
        <a class="pear-btn pear-btn-danger pear-btn-xs" plain lay-event="forceLogout"><i class="layui-icon layui-icon-close"></i>&nbsp;强退</a>
    <!-- #end -->
	#[[{{# } }}]]#
    </div>
    </script>

    <!-- 状态字段 -->
    <script type="text/html" id="bean-status">
    <!-- #DICTS(type="user_online_status")#for(item : dicts) -->
    #[[{{# if(d.status == ']]##(item.value)#[[') { }}]]#
        <span class="#(item.listClass)">#(item.label)</span>
    #[[{{# } }}]]#
    <!-- #end#end -->
    </script>
    
    <!-- 创建时间 -->
    <script type="text/html" id="bean-startDatetime">
        {{layui.util.toDateString(d.startDatetime, "yyyy-MM-dd HH:mm:ss")}}
    </script>

    <!-- 最后访问时间 -->
    <script type="text/html" id="bean-activityDatetime">
        {{layui.util.toDateString(d.activityDatetime, "yyyy-MM-dd HH:mm:ss")}}
    </script>

#include("../../_common/foot.html")
<script>
layui.use(['table', 'form', 'jquery', 'common'], function() {
    var $ = layui.jquery;
    var table = layui.table;
    var form = layui.form;
    var common = layui.common;

    // 模块操作路径
    var MODULE_PATH = "#CTX()/admin/monitor/online/";
    
    // 弹窗大小
    var AREA = [common.isModile() ? '100%' : '720px', common.isModile() ? '100%' : '95%'];
    
    // 监听表格中每条记录的操作
    table.on('tool(data-table)', function(obj) {
        if (obj.event === 'forceLogout') { //
            window.forceLogout(obj.data['id']);
        }
    });

    // 表格上端的工具条
    table.on('toolbar(data-table)', function(obj) {
        if (obj.event === 'batchForceLogout') {
            window.batchForceLogout(obj);
        } else if (obj.event === 'toggleQueryPanel') {
        	queryFn.panel.toggle();
        }
    });
    
    // 监听排序切换
    table.on('sort(data-table)', function(obj) {
        $('[name="sortField"]').val(obj.field);
        $('[name="sortType"]').val(obj.type);
        window.reloadTable();
    });

    /*
     * 打开新增或编辑页面
     */
    window.addOrEdit = function (title, url, type, action){
        layer.open({
            type : 2,
            title : title,
            content : url,
            maxmin : false,
            area : AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '保存', '取消' ],
            yes : function(index, layero) {
                var iframeWindow = window['layui-layer-iframe' + index],
                submitID = 'data-save', // 此ID必须和弹出iframe窗口中提交按钮的ID和Filter值一致
                submit = layero.find('iframe').contents().find("#" + submitID);

                // 监听提交
                iframeWindow.layui.form.on('submit('+ submitID + ')', function(data) {
                    $.ajax({ // 用Ajax替换弹窗中的提交
                        url : MODULE_PATH + action,
                        type : type,
                        data : data.field, // 获取提交的数据
                        beforeSend : function(){layer.load();}, // 防止重复操作
                        complete : function(){layer.closeAll('loading');}, //解除防重复操作
                        success : function(result){
                            if(result.code == 200){
                                // 提交 Ajax 成功后，静态更新表格中的数据
                                window.reloadTable(); // 数据表格刷新
                                layer.close(index); //关闭弹层
                            } else {
                                if(result.description){
                                    // Ajax调用成功，但后台返回失败信息
                                    layer.alert(result.description, {icon: 5});
                                } else {
                                    layer.alert("操作失败！", {icon: 2});
                                }
                            }
                        },
                        error : function (e) { // Ajax调用失败
                            layer.alert("操作失败：" + e.responseText, {icon: 2});
                        }
                    });
                    return false; // 一定要返回False来阻止弹出窗口中提交按钮的再次提交
                });

                submit.trigger('click'); // 这里触发弹出窗口的提交按钮
            }
        });
    }
    

    /*
     * 批量删除操作
     */
    window.batchForceLogout = function(obj) {
        var checkIds = common.checkField(obj, 'id');
        
        if (checkIds === "") {
            layer.msg("未选中任何记录", {
                icon: 3,
                time: 1000
            });
            return false;
        }
        window.forceLogout(checkIds);
    }
    
    /*
     * 确认删除操作
     */
    window.forceLogout = function(tokens) {
        layer.confirm('确定要强退选择的记录？', {
            icon: 3,
            title: '提示'
        }, function(index) {
            layer.close(index);
            $.ajax({
                url: MODULE_PATH + "forceLogout",
                dataType: 'json',
                type: 'delete',
                data: {"tokens": tokens},
                beforeSend : function(){layer.load();}, // 防止重复操作
                complete : function(){layer.closeAll('loading');}, //解除防重复操作
                success: function(result) {
                    if (result.code == 200) {
                        // 提交 Ajax 成功后，静态更新表格中的数据
                        window.reloadTable(); // 数据表格刷新
                    } else {
                        if(result.description){
                            // Ajax调用成功，但后台返回失败信息
                            layer.alert(result.description, {icon: 5});
                        } else {
                            layer.alert("操作失败！", {icon: 2});
                        }
                    }
                }
            })
        });
    }

    /*
     * 刷新表格操作
     */
    window.refresh = function(data) {
        window.reloadTable(data);
    }

    /*
     * 刷新表格
     */
    window.reloadTable = function(data) {
        table.render({
            elem: '#data-table',
            url: MODULE_PATH + "query",
            method: "post",
            initSort: {"field": $('[name="sortField"]').val(), "type": $('[name="sortType"]').val()},
            request: {pageName: 'pageNumber', limitName: 'pageSize' },
            where: form.val("query-form"),
            page: true,
            height: 'full-95',
            toolbar: '#table-toolbar',
            defaultToolbar: [{title: "查询", layEvent: "toggleQueryPanel", icon: "layui-icon-search"}, 'filter'],
            size: 'sm',
            cols: [[
                {type: 'checkbox', align: 'center', width: 60},
                {field: 'id', align: 'left', minWidth: 180, width: '18%', sort: true, title: 'Session'},
                {field: 'nickname', align: 'left', minWidth: 130, width: '10%', sort: true, title: '昵称'},
                {field: 'ip', align: 'center', width: 160, sort: true, title: 'IP地址'},
                {field: 'location', align: 'left', minWidth: 130, width: '10%', sort: true, title: '登录位置'},
                {field: 'browser', align: 'left', minWidth: 150, width: '15%', sort: true, title: '浏览器类型'},
                {field: 'os', align: 'center', minWidth: 130, width: '13%', sort: true, title: '操作系统'},
                {field: 'status', align: 'center', width: 100, sort: true, title: '在线状态', templet: '#bean-status'},
                {field: 'startDatetime', align: 'center', width: 160, sort: true, title: '创建时间', templet: '#bean-startDatetime'},
                {field: 'activityDatetime', align: 'center', width: 160, sort: true, title: '最后访问时间', templet: '#bean-activityDatetime'},
                {toolbar: '#operate-bar', align: 'left', width: 80, title: '操作'}
            ]]
        });
    }
    
    /*
     * 页面加载完成时先初始化表格
     */
    window.reloadTable();
    
});
</script>
</body>
</html>
